<script setup>
import { ref, onMounted, onUpdated } from "vue";
import saveMsg from "../../utils/saveMsg.js";
import _ from "lodash";
import { onClickOutside } from "@vueuse/core";
import { MESSAGE_TYPE } from "@/IM/constant";
// import store from "@/store";
const emit = defineEmits(["getImageFileFromClipboard", "getMessageQuoteContent", "clearQuoteContent"]);
const editable = ref(null);
onMounted(() => {
  if (editable.value) {
    editable.value.focus();
  }
});
onUpdated(() => {
  editable.value.focus();
});
//emojis框展开
const isShowEmojisBox = ref(false);
const emojisBox = ref(null);
onClickOutside(emojisBox, () => {
  isShowEmojisBox.value = false;
});
//新增一个emoji
const onAddOneEmoji = emoji => {
  textContent.value = textContent.value + emoji;
};
//消息引用
const messageQuoteRef = ref(null);
const handleQuoteMessage = msgBody => {
  messageQuoteRef.value && messageQuoteRef.value.setQuoteContent(msgBody);
};
//监听键盘按下事件，如果为enter键则发送文本内容,shift+enter则换行。
const onTextInputKeyDown = event => {
  if (event.keyCode === 13 && !event.shiftKey) {
    event.preventDefault();
    // 执行发送操作
    sendTextMessage();
  } else if (event.keyCode === 13 && event.shiftKey) {
    // 换行操作
    insertNewLine();
  }
};
//换行操作
const insertNewLine = () => (textContent.value += "\n");
//发送文本内容
const textContent = ref("");
const sendTextMessage = _.debounce(async () => {
  //如果输入框全部为空格同样拒绝发送
  if (textContent.value.match(/^\s*$/)) return;
  let result = saveMsg(textContent.value, MESSAGE_TYPE.TEXT);
  if (result) {
    textContent.value = "";
  }
}, 50);

/* 监听输出面板粘贴事件 */
const dispatchPasteEvent = event => {
  const items = (event.clipboardData || window.clipboardData).items;
  const isImage = Array.from(items).some(item => item.kind === "file" && item.type.startsWith("image/"));
  if (isImage) {
    console.log("粘贴内容是图片");
    emit("getImageFileFromClipboard", items);
  } else {
    console.log("粘贴内容不是图片");
  }
};
const onEditMessage = msg => {
  textContent.value = msg;
};
defineExpose({
  onAddOneEmoji,
  onEditMessage,
  handleQuoteMessage
});
</script>
<template>
  <textarea
    ref="editable"
    v-model="textContent"
    class="chat_content_editable"
    spellcheck="false"
    contenteditable="true"
    placeholder="请输入消息内容..."
    @keydown="onTextInputKeyDown"
    @paste="dispatchPasteEvent"
  >
  </textarea>
  <el-button :class="[textContent === '' ? 'no_content_send_btn' : 'chat_send_btn']" type="primary" @click="sendTextMessage">
    发送
  </el-button>
</template>

<style lang="scss" scoped>
textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}
.chat_content_editable {
  box-sizing: border-box;
  width: 100%;
  min-height: 100px;
  padding: 10px 20px;
  font-family: "PingFang SC";
  font-size: 14px;
  letter-spacing: 0.5px;
  caret-color: #2454ff;
  resize: none;
  background: none;
  border: none;
}
.no_content_send_btn {
  position: absolute;
  right: 20px;
  bottom: 50px;
  width: 80px;
  opacity: 0.5;
}
.chat_send_btn {
  position: absolute;
  right: 20px;
  bottom: 50px;
  width: 80px;
}
</style>
